import { C05CustomerService, C23ShopListing, Layout } from "@/components";
import { getShop, useApplicationInfo } from "@/store/applicationDataContext";
import { useUserInfo } from "@/store/userDataContext";
import { useEffect } from "react";
import "./index.scss";
import { ActionNames, sendAction } from "@/utils/tracking";

function Shop() {
  const { applicationState, dispatch } = useApplicationInfo();
  const { userData } = useUserInfo().userInfoState;
  const { shopItems } = applicationState;

  useEffect(() => {
    if (shopItems === null) {
      getShop(dispatch);
    }
  }, [dispatch]);

  useEffect(() => {
    sendAction(ActionNames.ShopListImpression);
  }, []);

  return (
    <Layout>
      {shopItems && (
        <>
          <C23ShopListing shopCards={shopItems} />
          <C05CustomerService
            cartItemLength={userData?.userInfo.shoppingCartsCount || 0}
          />
        </>
      )}
    </Layout>
  );
}

export default Shop;
